<template>
    <view class="page-box">
        <header class="header">
            <view class="log-search row verCenter bothSide">
                <view class="logo row"></view>
                <template v-if="is_show">
                    <text class="iconfont icon-icon_cuowu" @click="is_show=false"></text>
                </template>
                <template v-else>
                    <text class="iconfont icon-a-tubiaochangyongsousuo" @click="is_show=true"></text>
                </template>
            </view>
        </header>
        <section class="section">
            <view class="search row">
                <view class="search-wrap row bothSide verCenter" v-if="is_show">
                    <input type="text" placeholder="搜索产品名称/关键字" class="uni-input" placeholder-style="color:#6E767A" @input="handleInput" v-model="searchParams.product_name" />
                    <text class="iconfont icon-a-tubiaochangyongsousuo"></text>
                </view>
            </view>
            <!-- 筛选项 -->
            <view class="business-node row avarage verCenter">
                <view class="box" v-for="(item, index) in selfBusiness" :key="index" @click="handleBusinessClick(index + 1)">
                    {{item}}<text class="num row rowCenter verCenter">{{selfBusinessCount[index+1] || 0}}</text>
                </view>
            </view>
            <view class="filter-box row avarage verCenter">
                <view class="item">
                    <picker @change="bindPickerChange($event,1)" :value="product_series_index" :range="product_series" range-key="name">
                        <view class="row verCenter bar">
                            <view class="uni-input">{{product_series_index == -1 ? '产品系列' : product_series[product_series_index].name}}</view>
                            <text class="ico"></text>
                        </view>
                    </picker>
                </view>
                <view class="item">
                    <picker @change="bindTimeChange" mode="date" fields="month">
                        <view class="row verCenter bar">
                            <view class="uni-input">{{searchParams.create_time || '筛选年月'}}</view>
                            <text class="ico"></text>
                        </view>
                    </picker>
                </view>
                <view class="item">
                    <picker @change="bindPickerChange($event,2)" :value="self_business_progress_node_index" :range="self_business_progress_node" range-key="name">
                        <view class="row verCenter bar">
                            <view class="uni-input">{{self_business_progress_node_index == -1 ? '业务进度' : self_business_progress_node[self_business_progress_node_index].name}}</view>
                            <text class="ico"></text>
                        </view>
                    </picker>
                </view>
            </view>
            <!-- 列表 -->
            <view class="list" v-if="list.length > 0">
                <scroll-view scroll-y="true" style="height: calc(100vh - 260rpx);" @scrolltolower="lower">
                    <view class="box" v-for="(item,index) in list" :key="index" @click="toUrl(item.id)">
                        <view class="top row bothSide verCenter">
                            <view class="left row verCenter">
                                <image :src="item.logo" mode="widthFix"></image>
                                <text class="tt">{{item.product_name}}</text>
                            </view>
                            <view class="right row verCenter">
                                <text class="iconfont" :class="item.self_business_progress_node > 14 ? 'icon-bianzu' : 'icon-a-tubiaochangyongsousuo2'"></text>
                                <text class="tt">{{item.self_business_progress_node_val}}</text>
                            </view>
                        </view>
                        <view class="wrap row bothSide">
                            <view class="text-item row verCenter">
                                <text class="label">客户姓名：</text>
                                <text class="t1 ellipsis">{{item.apply_name}}</text>
                            </view>
                            <view class="text-item row verCenter">
                                <text class="label">手机号码：</text>
                                <text class="t1">{{item.showRealMobile ? item.mobile : item.maskedMobile}}</text>
                                <text class="iconfont" :class="item.showRealMobile ? 'icon-mimaxianshi' : 'icon-a-tubiaochangyongsousuo7'" @click.stop="toggleMobile(index)"></text>
                            </view>
                            <view class="text-item row verCenter">
                                <text class="label">借款金额：</text>
                                <text class="t2">{{item.apply_amount}}元</text>
                            </view>
                            <view class="text-item row verCenter">
                                <text class="label">借款期限：</text>
                                <text class="t1">{{item.loan_cycle}}</text>
                            </view>
                            <view class="text-item row verCenter" style="flex:  0 0 100%;">
                                <text class="label">订单编号：</text>
                                <text class="t1">{{item.order_sn}}</text>
                            </view>
                            <view class="text-item row verCenter" style="flex: 0 0 100%; margin-bottom: 0;">
                                <text class="label">创建时间：</text>
                                <text class="t1">{{item.create_time}}</text>
                            </view>
                        </view>
                    </view>
                </scroll-view>
            </view>
            <view class="no-data column rowCenter verCenter" v-else>
                <image src="@/static/card.dd09cd89.png" class="pic" mode="aspectFill"></image>
                <text class="tt">暂无进件信息哦～</text>
            </view>
        </section>
    </view>
</template>

<script>
    import { API } from '@/util/api.js';
    import debounce from 'lodash/debounce';
    export default {
        data() {
            return {
                is_show: false,
                hasMoreData: true, //是否分页加载
                self_business_progress_node: [{ name: '待客户申请', value: '1' }, { name: '待客户准入', value: '2' }, { name: '客户准入未通过', value: '3' }, { name: '待提交进件资料', value: '4' }, { name: '待资方审批', value: '5' }, { name: '审批未通过', value: '6' }, { name: '资方退回需补充资料', value: '7' }, { name: '审批通过', value: '8' }, { name: '审批通过（补录资料）', value: '9' }, { name: '待发起签约', value: '10' }, { name: '待客户签约', value: '11' }, { name: '车务办理', value: '12' }, { name: '待提交请款资料', value: '13' }, { name: '放款完成，请及时完成材料归档', value: '14' }, { name: '订单归档完成', value: '15' }, { name: '账户充值完成', value: '16' }],
                self_business_progress_node_index: -1,
                product_series: [{ name: '甄选系列', value: 1 }, { name: '优选系列', value: 2 }, { name: '惠选系列', value: 3 }, { name: '易选系列', value: 4 }],
                product_series_index: -1,
                selfBusiness: ['预审', '审批', '签约', '车务', '请款', '结算'],
                selfBusinessCount: {},
                list: [],
                searchParams: {
                    product_name: '',
                    product_api: '',
                    product_type: 1,
                    product_series: '', //产品系列
                    self_business_progress: '', //业务进度
                    self_business_progress_node: '', //业务节点
                    create_time: '', //下单时间
                    page: 1,
                    limit: 20
                }
            };
        },
        onLoad(options) {
            this.searchParams.product_api = options.product_api;
            this.getSelfBusinessCount();
            this.getData();
        },
        methods: {
            tab(index) {
                this.curr = index;
            },
            handleInput: debounce(function(e) {
                this.list = [];
                this.searchParams.page = 1;
                this.getData();
            }, 500),
            /**
             * 时间选择框
             * @param {Object} e
             * @param {Object} type
             */
            bindTimeChange(e) {
                this.searchParams.create_time = e.detail.value;
                this.resetChange();
                this.getData();
            },
            /**
             * 显示手机号
             * @param {Object} index
             */
            toggleMobile(index) {
                this.$set(this.list[index], 'showRealMobile', !this.list[index].showRealMobile);
            },
            /**
             * 选择框监听
             * @param {Object} e
             * @param {Object} type
             */
            bindPickerChange(e, type) {
                const value = e.detail.value;
                switch (type) {
                    case 1: // 产品系列选择
                        this.product_series_index = value;
                        this.searchParams.product_series = this.product_series[value].value;
                        break;
                    case 2: // 业务节点选择  
                        this.self_business_progress_node_index = value;
                        this.searchParams.self_business_progress_node = this.self_business_progress_node[value].value;
                        break;
                }

                // 重置并重新获取数据
                this.resetChange();
                this.getData();
            },
            /**
             * 下拉滚动事件监听
             * @param {Object} e
             */
            lower(e) {
                if (!this.hasMoreData) {
                    return;
                }
                this.searchParams.page++;
                this.getData();
            },
            /**
             * 业务进度点击处理
             * @param {Number} progress 进度值
             */
            handleBusinessClick(progress) {
                this.searchParams.self_business_progress = progress;
                this.resetChange();
                this.getData();
            },
            /**
             * 获取自主进件各个业务进度数量
             */
            getSelfBusinessCount() {
                this.request(API.getSelfBusinessCount, 'GET', this.searchParams, true).then(res => {
                    if (res.code === 0) {
                        this.selfBusinessCount = res.data;
                    } else {
                        uni.showToast({
                            title: res.msg,
                            icon: 'none'
                        });
                    }
                });
            },
            getData() {
                this.request(API.orderList, 'GET', this.searchParams, true).then(res => {
                    if (res.code === 0) {
                        const newList = res.data.list;
                        if (newList.length > 0) {
                            this.hasMoreData = true;
                            this.list = [...this.list, ...newList.map(item => {
                                return {
                                    ...item,
                                    showRealMobile: false,
                                    maskedMobile: item.mobile ? item.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') : ''
                                };
                            })];
                        } else {
                            this.hasMoreData = false;
                        }
                    } else {
                        uni.showToast({
                            title: res.msg,
                            icon: 'none'
                        });
                    }
                });
            },
            /**
             * 重置数据
             */
            resetChange() {
                this.list = [];
                this.searchParams.page = 1;
            },
            toUrl(id) {
                uni.navigateTo({
                    url: `/pages/order/selfDetail?order_id=${id}`
                })
            }
        }
    };
</script>

<style scoped lang="scss">
    @import '@/assets/css/order/index.scss';
</style>